<template>
    <div
        :class="{
            'left-scroll-container': type === 'left',
            'right-scroll-container': type === 'right',
            'show-page-left': type === 'left' && !showPageLeft,
            'show-page-right': type === 'right' && !showPageRight,
        }"
    >
        <ElAutoResizer
            :style="{
                width: '100%',
                height: '100%',
            }"
        >
            <template #default="{ height, width }">
                <!-- 传入的width 目前为 880px 高度最小值为 928 -->
                <slot
                    :width="width"
                    :height="height > minHeight ? height : minHeight"
                ></slot>
            </template>
        </ElAutoResizer>
        <div v-if="screenRatio16_9" class="panelbg" @click="handleClickPanel" />
    </div>
</template>

<script setup lang="ts">
import { useGlobalStore } from '@/store/global'
const globalStore = useGlobalStore()
const screenRatio16_9 = computed(() => globalStore.screenRatio16_9)
const showPageLeft = computed(() => globalStore.showPageLeft)
const showPageRight = computed(() => globalStore.showPageRight)

// props 定义
const props = defineProps<{
    type: 'left' | 'right'
}>()

// 最小高度为设计稿的1080 - 112 - 40 = 928
const minHeight = 928

// 点击面板
const handleClickPanel = () => {
    if (props.type === 'left') {
        globalStore.showPageLeft = !globalStore.showPageLeft
    } else {
        globalStore.showPageRight = !globalStore.showPageRight
    }
    window.microApp.dispatch({ showPageLeft: globalStore.showPageLeft, showPageRight: globalStore.showPageRight })
}
</script>

<style lang="scss" scoped>
.left-scroll-container,
.right-scroll-container {
    position: absolute;
    top: 10px;
    bottom: 40px;
    z-index: 4;
    width: 840px;
    pointer-events: auto;
    .panelbg {
        position: absolute;
        top: 46%;
        width: 32px;
        height: 100px;
        pointer-events: auto;
        cursor: pointer;
        z-index: 9;
        transition: all 0.3s ease;
    }
}

.left-scroll-container {
    left: 56px;
    transition: all 0.3s ease;
    .panelbg {
        left: 840px;
        background-image: url('@/assets/imgs/panel-left.png');
        background-size: 100% 100%;
    }
}
.show-page-left {
    left: -840px;
}

.right-scroll-container {
    right: 56px;
    transition: all 0.3s ease;
    .panelbg {
        right: 839px;
        background-image: url('@/assets/imgs/panel-right.png');
        background-size: 100% 100%;
    }
}
.show-page-right {
    right: -840px;
}
</style>
